<template>
<!-- zx 2021 7 19 -->
<el-card class="box-card">
<div>
  <div class="one">
  <!-- 顶部面包屑导航 -->
  <el-breadcrumb separator="/" class="video1">
  <el-breadcrumb-item >资源配置</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">宣传视频</a></el-breadcrumb-item>
</el-breadcrumb>
   <!-- 按钮 -->
        <div class="but">
          <el-button  @click="preview">预览</el-button>
          <el-button type="primary" >保存</el-button>
          <el-button>取消</el-button>
        </div>
</div>

<!-- 标题配置 -->
<div class="video2">标题配置</div>
<el-form ref="form" :model="form" label-width="120px" class="video3" 
label-position="left">
  <el-form-item label="主标题：">
    <el-input v-model="form.haeding"></el-input>
  </el-form-item>
   <el-form-item label="副标题：">
    <el-input v-model="form.subhead"></el-input>
  </el-form-item>
  <div class="video5">动图配置</div>
  <el-form-item label="宣传动图：">
    <div class="head_img">
    <img :src="avatar" id="show" v-show="begin" class="video7"/>
    <!-- 图片地址动态绑定 -->
    
       <div class="caption" v-show="reveal">
         <input id="file" ref="imgs" type="file" accept="image/*" class="video6" @change="handleFile" >
       </div>
       
   <!-- 删除 -->
   <div class="close" @click = "closedBth" v-show="begin" ></div>
   </div>    
  </el-form-item>
   <div class="video5">视频配置</div>
   <el-form-item label="宣传视频：">
    <div class="head_img">
       <video class="video7" ref="video" muted loop autoplay v-show="beginVideo">
          <source :src='pron' type="video/mp4" />
        </video>
    <!-- 图片地址动态绑定 -->
    
       <div class="caption" v-show="revealVideo">
         <input id="fileVideo" ref="imgsVideo" type="file" class="video6" 
         @change="handleVideo" >
       </div>
       
   <!-- 删除 -->
   <div class="close" @click = "closedVideo" v-show="beginVideo" ></div>
   </div>    
  </el-form-item>

  </el-form>

  <!-- 预览弹框 -->
  <div class="three" v-show= "threeshow">
     <div class="shut" @click="threeBtn"></div>
     <div class="up" v-show="previewShow">
       <div class="txt1" >{{form.haeding }}</div>
       <div class="txt2">{{form.subhead}}</div>
       <img src="./open.png" class="img1" @click="skip">
     </div>
     <img :src="avatar" class="middle"  v-show="previewShow">
     <video
          class="low"
          autoplay="autoplay"
          loop="loop"
          preload="auto"
          controls
          v-show="closeShow"
          ref="videoShow"
        >
          <source :src="pron" type="video/mp4" />
        </video>
     
  </div>
  <!-- 遮盖层 -->
  <div class="all" v-show= "threeshow"></div>

</div>
</el-card>
</template>
<script>
export default {
  data(){
    return{
      form:{
        haeding:'',
        subhead:"",
        picture:"",
      },
       labelPosition: 'left',
        avatar:"",
        img:"",
       reveal:true,
       begin:false,
       beginVideo:false,
       revealVideo:true,
       pron:"",
      previewShow:false,
      threeshow:false,
      closeShow:false,

    }
  },
  methods:{
   
    handleFile(e){
       const file = e.target.files[0] || e.dataTransfer.files[0]
    let URL = window.URL || window.webkitURL; // 获取当前域名地址

    this.avatar= URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址
    this.begin = true
    this.reveal = false
    this.$refs.imgs.type='text'
    },
    closedBth(){
       this.begin = false
       this.avatar = ""
       this.reveal = true
       this.$refs.imgs.type='file'
    },
    handleVideo(e){
    const file = e.target.files[0] || e.dataTransfer.files[0]
    let URL = window.URL || window.webkitURL; // 获取当前域名地址
    this.$refs.video.src= URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址
     this.$refs.videoShow .src = URL.createObjectURL(file);
    this.beginVideo = true
    this.revealVideo = false
    this.$refs.imgsVideo.type='text'
    },
    closedVideo(){
       this.beginVideo = false
      this.revealVideo = true
      this.$refs.imgsVideo.type='file'
    },

    // 预览
    preview(){
       this.threeshow = true
       this.previewShow = true
    },
    skip(){
      this.previewShow = false
      this.closeShow = true
    },
    threeBtn(){
       this.threeshow = false
       this.previewShow = false
       this.closeShow = false
    
    }
  }

}
</script>
<style lang="scss" scoped>
.box-card{
  width: 1610px;
  height: 1050px;
  margin-top: 20px;
  margin-left: 20px;
}
.video1{
  padding-left: 40px;
  padding-top: 24px;
  font-size: 18px;
  line-height: 29px;
}
.video2{
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding-left: 40px;
  margin-top: 48px;
}
.el-form-item {
  margin-top: 36px;
}
.video3{
  margin-top: 32px;
  font-size: 14px;
  margin-left: 40px;
}
.video4{
  width: 600px;
}
.video5{
  font-size: 20px;
  font-weight: 700;
  margin-top: 56px;
  text-align: left;
}
.video6{
  width: 70px;
  height: 70px;
  opacity: 0;
}
.head_img{
  width: 416px;
  height: 236px;

  border: 1px solid #DCDFE6;
  display:flex;
  justify-content: center;
  align-items: center;
}

.caption{

  width: 70px;
  height: 70px;
  background: url("./Icon／.png") no-repeat center center;
  background-size: 100% 100%;
}
.close{
  width: 40px;
  height: 40px;
  background: url("./icon.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: -20px;
  left: 391px ;

}
.el-input {
      width: 600px;
      height: 40px;
      position: absolute;
      left: 0;
      margin-top: 16px;
    }
.hiddenInput{
  display: none;
}
.video7{
  width: 100%;
  height: 100%;
}
.one{
   padding-left: 40px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
}
.three{
  width: 1152px;
  height: 648px;
   position: absolute; left: 50%; top: 50%;
  margin-top: -324px;    /* 高度的一半 */
  margin-left: -576px; 
  z-index: 5;
  background: #000;
  .shut{
    z-index: 23;
    width: 70px;
    height: 70px;
    background: url("./icon.png") no-repeat center;
    background-size: 100% 100%;
     position: absolute;
     top: -35px;
     left: 1117px ;

  }
  .up{
    position: absolute;
    top: 192px;
    left: 216px;
    .txt1{
      color: #FFF;
      font-size: 29px;
    }
    .txt2{
      color: #fff;
      font-size: 14px;
      margin-top: 13px;
    }
    .img1{
      width: 60px;
      height: 60px;
      margin-top: 24px;
    }
  }
  .middle{
    width: 100%;
    height: 100%;
  }
  .low{
    width:1152px ;
    height: 648px;

  }
 
}
.all{
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>